﻿@{
    ViewData["Title"] = "显示生产退料";
    Layout = null;
}
@Html.AntiForgeryToken()
@using Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 搜索栏 -->
            <form class="layui-form" lay-filter="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">退料单编号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="ReturnOrderCode" placeholder="请输入退料单编号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">生产工单</label>
                        <div class="layui-input-inline">
                            <input type="text" name="ProductionWorkOrder" placeholder="请输入生产工单" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">仓库名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="ReceiveWarehouse" placeholder="请输入仓库名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="search">
                            <i class="layui-icon layui-icon-search"></i> 搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

            <!-- 工具栏 -->
            <div class="layui-btn-container" style="margin-bottom: 10px;">
                <button class="layui-btn layui-btn-sm" id="btnAdd">
                    <i class="layui-icon layui-icon-add-1"></i> 新增
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" id="btnBatchDelete">
                    <i class="layui-icon layui-icon-delete"></i> 批量删除
                </button>
            </div>

            <!-- 表格 -->
            <table id="materialReturnTable" lay-filter="materialReturnTable"></table>
        </div>
    </div>
</div>

<!-- 操作列模板 -->
<script type="text/html" id="operationBar">
    <div class="table-action-group">
        {{# if(d.operation === '草稿') { }}
        <a class="table-action-link" lay-event="executeReturn"><i class="layui-icon">&#xe6b2;</i> 执行退料</a>
        <a class="table-action-link" lay-event="edit"><i class="layui-icon">&#xe642;</i> 修改</a>
        <a class="table-action-link" lay-event="del"><i class="layui-icon">&#xe640;</i> 删除</a>
        {{# } }}
    </div>
</script>

<script>
    layui.use(['table', 'form', 'layer'], function(){
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;

        // 获取token
        var token = $('input[name="__RequestVerificationToken"]').val();

        // 表格渲染
        table.render({
            elem: '#materialReturnTable',
            url: '/ProductionSystem/ProductionManagement/QueryProductionMaterialReturn',
            method: 'get',
            page: true,
            limit: 10,
            limits: [10, 20, 30, 50],
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'returnOrderCode', title: '退料单编号'},
                {field: 'returnOrderName', title: '退料单名称'},
                {field: 'productionWorkOrder', title: '生产工单'},
                {field: 'receiveWarehouse', title: '仓库名称'},
                {field: 'returnDate', title: '退料日期', templet: function(d){
                    return d.returnDate ? layui.util.toDateString(new Date(d.returnDate), 'yyyy-MM-dd') : '';
                }},
                {field: 'operation', title: '单据状态'},
                {title: '操作', toolbar: '#operationBar', width: 200, align: 'center', fixed: 'right'}
            ]],
            response: {
                statusCode: 0
            },
            parseData: function(res){
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.count,
                    "data": res.data
                };
            }
        });

        // 搜索表单提交
        form.on('submit(search)', function(data){
            table.reload('materialReturnTable', {
                where: data.field,
                page: {curr: 1}
            });
            return false;
        });

        // 新增按钮点击事件
        $('#btnAdd').on('click', function(){
            location.href = '/ProductionSystem/ProductionManagement/CreateProductionMaterialReturnView';
        });

        // 批量删除按钮点击事件
        $('#btnBatchDelete').on('click', function(){
            var checkStatus = table.checkStatus('materialReturnTable');
            var data = checkStatus.data;
            if(data.length === 0){
                layer.msg('请选择要删除的记录');
                return;
            }
            layer.confirm('确定要删除选中的记录吗？', function(index){
                var ids = data.map(function(item){ return item.id; });
                $.ajax({
                    url: '/ProductionSystem/ProductionManagement/BatchDeleteProductionMaterialReturn',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(ids),
                    headers: {
                        'RequestVerificationToken': token
                    },
                    success: function(res){
                        if(res.code === 0){
                            layer.msg('删除成功');
                            table.reload('materialReturnTable');
                        } else {
                            layer.msg(res.msg || '删除失败');
                        }
                    },
                    error: function(){
                        layer.msg('操作失败，请重试');
                    }
                });
                layer.close(index);
            });
        });

        // 监听工具条
        table.on('tool(materialReturnTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                location.href = '/ProductionSystem/ProductionManagement/UpdateProductionMaterialReturnView?id=' + data.id;
            } else if(obj.event === 'del'){
                layer.confirm('确定删除此记录？', function(index){
                    $.ajax({
                        url: '/ProductionSystem/ProductionManagement/BatchDeleteProductionMaterialReturn',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify([data.id]),
                        headers: {
                            'RequestVerificationToken': token
                        },
                        success: function(res){
                            if(res.code === 0){
                                layer.msg('删除成功');
                                obj.del();
                            } else {
                                layer.msg(res.msg || '删除失败');
                            }
                        },
                        error: function(){
                            layer.msg('操作失败，请重试');
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'executeReturn'){
                layer.confirm('确认退料吗？', {icon: 3, title: '提示'}, function(index){
                    console.log("退料id", data.id);
                    $.ajax({
                        url: '/ProductionSystem/ProductionManagement/UpProductionMaterialReturnById?id=' + data.id,
                        type: 'PUT',
                        headers: {
                            'RequestVerificationToken': token
                        },
                        success: function(res){
                            if(res.code === 0 || res.success){
                                layer.msg('退料成功！', {icon: 1});
                                table.reload('materialReturnTable');
                            } else {
                                layer.msg(res.msg || '退料失败', {icon: 2});
                            }
                        },
                        error: function(){
                            layer.msg('操作失败，请重试', {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>

<style>
/* 让表格列平均分布且无右侧空白 */
.layui-table th, .layui-table td {
    text-align: center;
    white-space: nowrap;
}
.layui-table-view .layui-table {
    table-layout: fixed;
}
.layui-table-view .layui-table th, .layui-table-view .layui-table td {
    width: auto !important;
}
.layui-table-view .layui-table th[data-field="0"],
.layui-table-view .layui-table td[data-field="0"] {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
}
.layui-table-view {
    width: 100% !important;
    min-width: 0 !important;
}
.layui-table-page {
    margin-right: 0 !important;
}
.table-action-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.table-action-link {
    color: #1890ff;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s;
}
.table-action-link i {
    margin-right: 2px;
    font-size: 16px;
}
.table-action-link:hover {
    color: #40a9ff;
    text-decoration: underline;
}
.layui-table-cell .table-action-link {
    margin-bottom: 0;
}
</style>